<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <artiCleitme
          v-for="(item,index) in acyiveList"
          :key="index"
          :artItem="item"
          @disLikeEV="disLikeEV"
          @reportEV="reportEV"
          @click.native="go_path(item.art_id)"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import artiCleitme from '@/views/Home/components/Articleitme.vue'
import { articlesListAPI, dislikeArticleAPI, reportArticleAPI } from '@/api/index'
// import { Notify } from 'vant'
import Notify from '@/ui/Notify'
// dislikeArticleAPI

export default {
  name: 'HmttArticleList',
  props: {
    channeId: Number
  },
  data () {
    return {
      acyiveList: [],
      refreshing: false,
      loading: false,
      finished: false,
      timestamp: new Date().getTime()
    }
  },
  components: {
    artiCleitme
  },
  mounted () {},
  created () {
    this.getarticlesListAPI()
  },
  methods: {
    // 1.0首次加载
    async getarticlesListAPI () {
      const params = {
        channelId: this.channeId, // 当前频道id
        timestamp: this.timestamp // 时间戳，分页
      }
      const {
        data: { data }
      } = await articlesListAPI(params) || {}
      this.acyiveList = [...this.acyiveList, ...data.results]
      this.timestamp = data.pre_timestamp
      this.loading = false
      // 没有返回分页的话，不在请求数据
      if (data.pre_timestamp === null) {
        this.finished = true
      }
    },
    // 2.0上啦刷新
    onRefresh () {
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    // 3.0触底加载
    async onLoad () {
      if (this.refreshing) {
        this.timestamp = new Date().getTime()
        this.acyiveList = []
        this.refreshing = false
      }
      this.getarticlesListAPI()
    },
    // 4.0不感兴趣或反馈
    async disLikeEV (id) {
      const body = {
        target: id
      }
      try {
        const { data } = await dislikeArticleAPI(body) || {}
        console.log(data)
        Notify({ type: 'success', message: '反馈成功' })
      } catch (err) {
        console.log(err)
      }
    },
    // 4.1举报文章
    async reportEV (target, type) {
      const body = { target, type }
      try {
        const { data } = await reportArticleAPI(body) || {}
        console.log(data)
        Notify({ type: 'success', message: '举报成功' })
      } catch (err) {
        console.log(err)
      }
    },
    // 4.2跳转详情页
    go_path (artid) {
      this.$router.push({
        path: '/ArticeDetail',
        query: {
          art_id: artid
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
